<!-- 调拨选择 -->
<template>
	<view class="content">
		<view class="content-head"></view>
		<view class="conter">
			<view class="conter-title title1">{{$t("index.title3")}}</view>
			<view class="conter-title title2">{{$t("index.title2")}}</view>
			<view class="item-box">
				<view class="item-w" v-for="item,index in list" :key="index">
					<view class="item" @click="handleItem(item)">{{item.text}}</view>

					<view class="" v-if="item.table.length > 0">
						<view class="item-box">
							<view class="intobtn" type="warn" @click="click(item)">Confirm warehousing</view>
						</view>

						<!-- 未确认列表 -->
						<view class="table-wrap">
							<zb-table :show-header="true" :columns="column" :fit="false" :border="true"
								@find="buttonFind" :data="item.table"></zb-table>
						</view>

						<view class="line"></view>
					</view>
				</view>
			</view>
		</view>

		<uni-popup ref="tablebox" type="center">
			<view class="popupotable">
				<zb-table :show-header="true" :columns="pcolumn" :fit="true" :border="true" :data="ptable"></zb-table>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						text: "Transfer to shop",
						value: 3,
						table: []
					},
					{
						text: "Transfer to Store",
						value: 2,
						table: []
					},
				],
				column: [{
						name: 'aim',
						label: 'Aim',
						align: 'center',
						width: 80
					},
					{
						name: 'sku_nuber',
						label: 'SKU',
						align: 'center',
						width: 80
					},
					{
						name: 'ctn',
						label: 'CTN',
						align: 'center',
						width: 42
					},
					{
						type: 'selection',
						width: 42
					},
					{
						name: 'detailed',
						type: 'operation',
						label: 'detailed',
						align: 'center',
						renders: [{
							name: 'find',
							type: "default",
							func: 'find' // func 代表子元素点击的事件 父元素接收的事件 父元素 @find
						}]
					},
				],
				ptable: [],
				pcolumn: [{
						name: 'time',
						label: 'Time',
						align: 'center',
					},
					{
						name: 'aim',
						label: 'Aim',
						align: 'center',
					},
					{
						name: 'sku_nuber',
						label: 'SKU',
						align: 'center',
					},
					{
						name: 'skc_number',
						label: 'Item ID',
						align: 'center',
					},
					{
						name: 'goods_code',
						label: 'PC ID',
						align: 'center',
					}
				]
			}
		},
		onShow() {
			this.handleList()
		},
		methods: {
			click(inititem) {
				let stand = uni.getStorageSync("standing")
				console.log(this.table);
				let type = 0
				if (inititem.value == 3) type = 4
				if (inititem.value == 2) type = 2

				inititem.table.map(item => {
					if (item.checked) {
						this.shopDeliveryConfim(type, item.goods_sku_id)
					}
				})
			},

			// 查看事件
			buttonFind(row, index) {
				console.log(row, index, 'row,index')
				this.findDetail(row.goods_sku_id, row.type)
				this.$refs.tablebox.open("center")
			},

			// 获取 查看的详情
			findDetail(id, type) {
				let stand = uni.getStorageSync("standing")
				this.$ajax(this.$http + '/shop/getDeliveryGoodsSkuDetails?remove_type=' + type + '&goods_sku_id=' + id,
					"GET",
					null,
					(response) => {
						let res = JSON.parse(response)
						console.log(res, 'res');
						if (res.code == 200) {
							// this.handleStoreList()
							this.ptable = res.data.map(item => {
								return {
									...item,
									time: this.$time5(item.ctime)
								}
							})
							console.log(this.ptable, 'this.ptable');
						}
					})
			},

			// 获取未确认的列表
			handleList() {
				let stand = uni.getStorageSync("standing")
				this.$ajax(this.$http + '/shop/getDeliverySalesGoodsSkuLog?remove_type=4', "GET", null, (response) => {
					let res = JSON.parse(response)
					console.log(res, 'res');
					if (res.code == 200) {
						this.list[0].table = res.data.map(item => {
							return {
								...item,
								type: 4
							}
						})
					}
				})
				this.$ajax(this.$http + '/shop/getDeliverySalesGoodsSkuLog?remove_type=2', "GET", null, (response) => {
					let res = JSON.parse(response)
					console.log(res, 'res');
					if (res.code == 200) {
						this.list[1].table = res.data.map(item => {
							return {
								...item,
								type: 2
							}
						})
					}
				})
			},

			// 店铺出库扫码确认
			shopDeliveryConfim(type, id) {
				let userInfo = uni.getStorageSync('userInfo')
				let url = this.$http + '/shop/DeliveryConfim?remove_type=' + type + '&goods_sku_id=' + id + '&shop_id=' +
					userInfo.id
				this.$ajax(url, "GET", null, (response) => {
					let res = JSON.parse(response)
					console.log(res, 'res');
					if (res.code == 200) {
						this.handleList()
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			handleItem(item) {
				uni.navigateTo({
					url: "/pages/transfer/index?text=" + item.text + "&value=" + item.value
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		height: 100vh;
		background: linear-gradient(to right, rgba(#FF725F80, 0.5), rgba(#FFEBEB80, 0.5));
	}

	.content-head {
		height: 88rpx;
	}

	.conter {
		border-radius: 20rpx 20rpx 0 0;
		height: 100%;
		background: #fff;
		padding: 60rpx 48rpx;
	}

	.conter-title {
		font-size: 36rpx;
		font-weight: 900;
	}

	.title2 {
		margin-top: 22rpx;
		margin-bottom: 92rpx;
	}

	.item-box {
		margin: 0 31rpx;
	}

	.item {
		width: 100%;
		line-height: 88rpx;
		background: #FF3C3F;
		color: #fff;
		font-size: 28rpx;
		border-radius: 20rpx;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.item-w {
		margin-bottom: 40rpx;
	}

	.intobtn {
		width: 100%;
		line-height: 88rpx;
		background: #FF3C3F;
		color: #fff;
		font-size: 28rpx;
		border-radius: 20rpx;
		text-align: center;
		margin-top: 40rpx;
	}

	.line {
		width: 100%;
		height: 2rpx;
		background: #ccc;
	}

	.table-wrap {
		margin-top: 40rpx;
	}

	.popupotable {
		//  scale(120%)
		transform: rotate(90deg);
		max-height: 600rpx;
	}

	/deep/.item-th {
		padding: 0 8px;
	}

	/deep/.item-td.even {
		padding: 0 8px;
	}

	/deep/.item-td.odd {
		padding: 0 8px;
	}

	/deep/.zb-table {
		border-left: 1rpx solid rgb(232, 232, 232);
	}
</style>